<script setup lang="ts">
  import { ref } from 'vue'
  import { useMemberStore, useAddressStore } from '@/stores'
  // 获取会员Store
  const memberStore = useMemberStore()
  // 获取屏幕边界到安全区域距离
  const safeTop = ref<number>(0)
  const { safeAreaInsets } = uni.getSystemInfoSync()
  safeTop.value = safeAreaInsets?.top as number
  if (safeTop.value < 30) {
    safeTop.value = 45
  }
  const selectAddress = () => {
    uni.navigateTo({ url: '/pages/myaddress/myaddress' })
  }
</script>

<template>

  <view class="navbar" :style="{ paddingTop: safeTop + 'px' }">
    <!-- logo文字 -->
    <view style="padding-top: 12px;"></view>
    <view class="logo">
      <text class="logo-image">湘味小厨</text>
    </view>
    <!--定位-->
    <view class="location">
      <image class="location-image" src="@/static/tabs/location.png"></image>
      <text class="location-text: ">配送点: {{ memberStore.profile ? memberStore.profile?.addressname : '暂无配送点'
        }}</text>
      <button class="location-button" @tap="selectAddress">选择配送点</button>

    </view>
    <!--定位-->
  </view>
</template>

<style lang="scss">
  /* 自定义导航条 */
  .navbar {
    background-image: url(@/static/images/navigator_bg.png);
    background-size: cover;
    position: relative;
    display: flex;
    flex-direction: column;
    padding-top: 20px;

    .logo {
      display: flex;
      align-items: center;
      height: 64rpx;
      padding-left: 30rpx;

      .logo-image {
        flex: 1;
        color: #fff;
        padding-left: 2rpx;
        font-size: 45rpx;
      }

      .logo-text {
        flex: 1;
        line-height: 28rpx;
        color: #fff;
        margin: 2rpx 0 0 20rpx;
        padding-left: 2rpx;
        border-left: 1rpx solid #fff;
        font-size: 26rpx;
      }
    }

    .location {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding: 0 10rpx 0 26rpx;
      height: 64rpx;
      margin: 16rpx 20rpx 0rpx 20rpx;
      color: #474444;
      font-size: 28rpx;
      border-radius: 10rpx 10rpx 0rpx 0rpx;
      background-color: rgba(255, 255, 255, 0.5);

      .location-button {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 80%;
        margin-right: 0rpx;
        font-size: 28rpx;
        border-radius: 50rpx;
        color: #ffffff;
        background-color: #28bb9c;
      }

      .location-image {
        width: 5%;
        height: 75%;
      }

      .location-text {
        margin-left: 10rpx;
      }
    }

  }
</style>
